<template>
  <div class="virtual-center">
    <!-- 顶部虚拟化资源池总览 -->
    <div class="resource-summary">
      <div class="summary-item host-summary">
     
        <div class="summary-info">
          <div class="summary-title">主机</div>
          <div class="summary-value">73</div>
        </div>
        <div class="summary-details">
          <div class="detail-item"><span class="status-dot green"></span>正常 66</div>
          <div class="detail-item"><span class="status-dot grey"></span>离线 0</div>
          <div class="detail-item"><span class="status-dot red"></span>故障 0</div>
          <div class="detail-item"><span class="status-dot orange"></span>其他 7</div>
        </div>
      </div>
      <div class="summary-icon-container">
         <img src="@/assets/v1.png" alt="主机图标" class="summary-icon-3d" style="width: 150px; height: 150px;">
      </div>
      <div class="summary-item vm-summary">
        <div class="summary-icon-container">
          <!-- <img src="@/assets/v1.png" alt="虚拟机图标" class="summary-icon-3d"> -->
        </div>
        <div class="summary-info">
          <div class="summary-title">虚拟机</div>
          <div class="summary-value">188</div>
        </div>
        <div class="summary-details">
          <div class="detail-item"><span class="status-dot green"></span>运行 86</div>
          <div class="detail-item"><span class="status-dot grey"></span>停止 58</div>
          <div class="detail-item"><span class="status-dot red"></span>故障 4</div>
          <div class="detail-item"><span class="status-dot orange"></span>其他 40</div>
        </div>
        
      </div>
      <div class="summary-icon-container">
            <img src="@/assets/v1.png" alt="主机图标" class="summary-icon-3d" style="width: 150px; height: 150px; opacity: 0.8;">
      </div>

      <div class="summary-item-horizontal cpu-summary">
        <div class="summary-icon-container-flat">
          <!-- <img src="your-path-to-cpu-flat-icon.png" alt="CPU图标" class="summary-icon-flat"> -->
          <span>CPU</span>
        </div>
        <div class="summary-stats">
          <div class="stats-value">153 <span class="unit">GHz 可用</span></div>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 0%;"></div>
          </div>
          <div class="stats-detail">已使用45.46% (69.56/153GHZ)</div>
        </div>
      </div>

      <div class="summary-item-horizontal memory-summary">
        <div class="summary-icon-container-flat">
          <!-- <img src="your-path-to-memory-flat-icon.png" alt="内存图标" class="summary-icon-flat"> -->
          <span>内存</span>
        </div>
        <div class="summary-stats">
          <div class="stats-value">500 <span class="unit">GB 可用</span></div>
          <div class="progress-bar-container">
            <div class="progress-bar" style="width: 0%;"></div>
          </div>
          <div class="stats-detail">已使用66.4% (332/500GB)</div>
        </div>
      </div>
    </div>
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 左侧：虚拟化资源明细+系统告警 -->
      <el-col :span="16">
        <el-row :gutter="20">
          <!-- 虚拟化资源明细 -->
          <el-col :span="24">
            <div class="resource-detail">
              <div class="resource-detail-title">虚拟化资源明池</div>
              <div class="resource-detail-cards">
                <div class="resource-card">
                  <div class="card-header">
                    <span class="icon icon-cpu"></span>
                    <span class="card-title">计算池</span>
                  </div>
                  <div class="card-content">
                    <div class="item-row">
                      <span>集群</span>
                      <span>15</span>
                    </div>
                    <div class="item-row">
                      <span>主机</span>
                      <span>73</span>
                    </div>
                    <div class="item-row">
                      <span>虚拟机</span>
                      <span>188</span>
                    </div>
                  </div>
                  <div class="card-footer">
                    <el-button type="text" size="mini">配置</el-button>
                  </div>
                </div>
                <div class="resource-card">
                  <div class="card-header">
                    <span class="icon icon-storage"></span>
                    <span class="card-title">存储池</span>
                  </div>
                  <div class="card-content">
                    <div class="item-row">
                      <span>数据存储</span>
                      <span>30</span>
                    </div>
                    <div class="item-row">
                      <span>磁盘</span>
                      <span>55</span>
                    </div>
                  </div>
                  <div class="card-footer">
                    <el-button type="text" size="mini">配置</el-button>
                  </div>
                </div>
                <div class="resource-card">
                  <div class="card-header">
                    <span class="icon icon-network"></span>
                    <span class="card-title">网络池</span>
                  </div>
                  <div class="card-content">
                    <div class="item-row">
                      <span>分布式交换机</span>
                      <span>35</span>
                    </div>
                  </div>
                  <div class="card-footer">
                    <el-button type="text" size="mini">配置</el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <!-- 系统告警 -->
          <el-col :span="24">
            <div class="system-alerts">
              <div class="system-alerts-title">系统告警</div>
              <div class="alerts-content">
                <div class="alerts-types">
                  <div class="alert-type active">
                    <span class="icon urgent"></span>
                    紧急 <span class="count">1</span>
                  </div>
                  <div class="alert-type">
                    <span class="icon important"></span>
                    重要 <span class="count">2</span>
                  </div>
                  <div class="alert-type">
                    <span class="icon minor"></span>
                    次要 <span class="count">0</span>
                  </div>
                  <div class="alert-type">
                    <span class="icon info"></span>
                    提示 <span class="count">0</span>
                  </div>
                </div>
                <div class="alerts-table">
                  <el-table :data="alertTableData" border style="width: 100%;" size="mini">
                    <el-table-column prop="id" label="告警ID" width="100"></el-table-column>
                    <el-table-column prop="level" label="告警级别" width="80">
                      <template slot-scope="scope">
                        <span v-if="scope.row.level==='紧急'" style="color:#f56c6c;">&#9888; 紧急</span>
                        <span v-else>{{scope.row.level}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="desc" label="告警描述"></el-table-column>
                    <el-table-column prop="object" label="告警对象"></el-table-column>
                    <el-table-column prop="type" label="对象类型"></el-table-column>
                    <el-table-column prop="time" label="产生时间"></el-table-column>
                    <el-table-column prop="clearTime" label="清除时间"></el-table-column>
                    <el-table-column prop="process" label="消除过程"></el-table-column>
                  </el-table>
                  <div class="alerts-more">
                    <a href="#">查看更多&gt;&gt;</a>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!-- 右侧：常用操作+帮助 -->
      <el-col :span="8">
        <el-row :gutter="20">
          <!-- 常用操作 -->
          <el-col :span="24">
            <div class="common-operations">
              <div class="operations-title-container">
                <span class="icon icon-common-ops"></span>
                <span class="operations-title-text">常用操作</span>
              </div>
              <div class="operations-grid">
                <div class="operation-item">
                  <span class="icon icon-config-wizard"></span>
                  <span>资源池配置向导</span>
                </div>
                <div class="operation-item">
                  <span class="icon icon-import-template"></span>
                  <span>导入模板</span>
                </div>
                <div class="operation-item">
                  <span class="icon icon-create-vm"></span>
                  <span>创建虚拟机</span>
                </div>
                <div class="operation-item">
                  <span class="icon icon-op-log"></span>
                  <span>操作日志</span>
                </div>
                <div class="operation-item">
                  <span class="icon icon-deploy-vm-template"></span>
                  <span>按模板部署虚拟机</span>
                </div>
                <div class="operation-item">
                  <span class="icon icon-collect-log"></span>
                  <span>收集日志</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 联网帮助 Card -->
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <div class="online-help-card">
              <div class="help-title-area">
                <span class="icon icon-online-help-title"></span>
                <span class="help-section-title-text">联网帮助</span>
              </div>
              <div class="online-help-links">
                <ul>
                  <li><a href="#">如何创建虚拟机</a></li>
                  <li><a href="#">如何添加主机</a></li>
                  <li><a href="#">什么是存储资源</a></li>
                </ul>
                <ul>
                  <li><a href="#">如何创建集群</a></li>
                  <li><a href="#">为主机添加数据存储</a></li>
                  <li><a href="#">如何在站点添加虚拟网络资源</a></li>
                </ul>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 其他帮助 Card -->
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <div class="other-help-card">
              <div class="help-title-area">
                <span class="icon icon-other-help-title"></span>
                <span class="help-section-title-text">其他帮助</span>
              </div>
              <div class="other-help-items">
                <div class="other-help-item">
                  <span class="icon icon-getting-started"></span>
                  <span>入门教程</span>
                </div>
                <div class="other-help-item">
                  <span class="icon icon-video-tutorial"></span>
                  <span>视频教程</span>
                </div>
                <div class="other-help-item">
                  <span class="icon icon-doc-center"></span>
                  <span>文档中心</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "VirtualCenter",
  data() {
    return {
      alertTableData: [
        {
          id: 'SP-ALM-2C',
          level: '紧急',
          desc: '存储池"Pool_C"',
          object: '存储池"Pool_C"',
          type: '性能告警',
          time: '2025-05-12',
          clearTime: '2025-05-12',
          process: '运维人员介入处理，问题已恢复'
        },
        {
          id: 'SP-ALM-2C',
          level: '紧急',
          desc: '存储池"Pool_I"',
          object: '存储池"Pool_I"',
          type: '可用性告警',
          time: '2025-05-12',
          clearTime: '2025-05-12',
          process: '运维人员介入处理，问题已恢复'
        },
        {
          id: 'SP-ALM-2C',
          level: '紧急',
          desc: '存储池"Pool_E"',
          object: '存储池"Pool_E"',
          type: '对象数超阈值',
          time: '2025-05-12',
          clearTime: '2025-05-12',
          process: '运维人员介入处理，问题已恢复'
        },
        {
          id: 'SP-ALM-2C',
          level: '紧急',
          desc: '存储池"Pool_F"',
          object: '存储池"Pool_F"',
          type: '可用性告警',
          time: '2025-05-12',
          clearTime: '2025-05-12',
          process: '运维人员介入处理，问题已恢复'
        },
        {
          id: 'SP-ALM-2C',
          level: '紧急',
          desc: '存储池"Pool_I"',
          object: '存储池"Pool_I"',
          type: '性能告警',
          time: '2025-05-12',
          clearTime: '2025-05-12',
          process: '运维人员介入处理，问题已恢复'
        }
      ],
      // 添加虚拟化资源池数据
      hostSummary: {
        total: 10,
        normal: 8,
        offline: 1,
        fault: 1,
        other: 0
      },
      vmSummary: {
        running: 15,
        stopped: 3,
        fault: 2,
        other: 0
      },
      cpuSummary: {
        available: 3.5, // GHz
        usedPercentage: 70,
        used: 2.45, // GHz
        total: 3.5 // GHz
      },
      memorySummary: {
        available: 16, // GB
        usedPercentage: 50,
        used: 8, // GB
        total: 16 // GB
      }
    }
  }
}
</script>

<style scoped>
.virtual-center {
  padding: 20px;
  background: #f5f7fa; /* 页面背景色，与图片接近 */
}
.resource-summary {
  background: #232c3b; /* 调整为与图片更匹配的颜色 */
  color: #fff;
  border-radius: 8px;
  padding: 30px 20px 20px 20px;
  min-height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.resource-detail {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  min-height: 120px;
}
.system-alerts {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  min-height: 180px;
}
/* 常用操作样式 */
.common-operations {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  min-height: 120px; /* 根据内容调整 */
  display: flex; /* 使用flex布局 */
  gap: 20px; /* 标题和网格之间的间距 */
}

.operations-title-container {
  display: flex;
  flex-direction: column; /* 图标和文字垂直排列 */
  align-items: center; /* 水平居中 */
  justify-content: flex-start; /* 从顶部开始对齐 */
  padding-top: 10px; /* 给上方一些空间 */
  width: 80px; /* 固定宽度 */
}

.operations-title-text {
  margin-top: 8px;
  font-size: 14px;
  color: #303133;
  text-align: center;
}

.operations-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 15px 10px; /* 行间距 和 列间距 */
}

.operation-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #606266;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.operation-item:hover {
  background-color: #f5f7fa;
}

.operation-item .icon {
  width: 20px; /* 操作项图标大小 */
  height: 20px;
  margin-right: 8px; /* 图标和文字间距 */
}

/* 请替换为您的实际图标路径 */
.icon-common-ops { background-image: url('your-path-to-common-ops-icon.png'); width: 28px; height: 28px; }
.icon-config-wizard { background-image: url('your-path-to-config-wizard-icon.png'); }
.icon-import-template { background-image: url('your-path-to-import-template-icon.png'); }
.icon-create-vm { background-image: url('your-path-to-create-vm-icon.png'); }
.icon-op-log { background-image: url('your-path-to-op-log-icon.png'); }
.icon-deploy-vm-template { background-image: url('your-path-to-deploy-vm-template-icon.png'); }
.icon-collect-log { background-image: url('your-path-to-collect-log-icon.png'); }
.help-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  min-height: 180px;
}
.resource-detail-title {
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 16px;
  color: #303133; /* 标题颜色 */
}
.resource-detail-cards {
  display: flex;
  gap: 20px; /* 卡片间距 */
}
.resource-card {
  background: #fafbfc; /* 卡片背景色 */
  border: 1px solid #ebeef5; /* 卡片边框 */
  border-radius: 8px;
  flex: 1;
  padding: 20px 16px 10px 16px;
  display: flex;
  flex-direction: column;
  min-width: 200px; /* 最小宽度，防止过窄 */
}
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.card-title {
  font-size: 15px;
  font-weight: 500;
  margin-left: 8px;
  color: #303133;
}
.card-content {
  flex: 1;
}
.item-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px; /* 调整字体大小 */
  color: #606266; /* 调整文字颜色 */
}
.card-footer {
  text-align: left;
  margin-top: 8px;
}
.icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* 请替换为您的实际图标路径 */
.icon-cpu {
  background-image: url('your-path-to-cpu-icon.png');
}
.icon-storage {
  background-image: url('your-path-to-storage-icon.png');
}
.icon-network {
  background-image: url('your-path-to-network-icon.png');
}

/* 系统告警样式更新 */
.system-alerts-title {
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 16px;
  color: #303133;
}
.alerts-content {
  display: flex;
}
.alerts-types {
  width: 120px; /* 根据图片调整宽度 */
  margin-right: 20px; /* 与表格的间距 */
  display: flex;
  flex-direction: column;
  gap: 0; /* 移除类型之间的默认间距，通过padding控制 */
}
.alert-type {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  padding: 10px 8px; /* 调整内边距 */
  border-left: 3px solid transparent; /* 默认左边框透明 */
  transition: background-color 0.2s, color 0.2s;
}
.alert-type:hover {
  background-color: #f5f7fa; /* 鼠标悬浮背景色 */
}
.alert-type.active {
  background-color: #fef0f0; /* 激活项背景色 */
  color: #f56c6c; /* 激活项文字颜色 */
  border-left-color: #f56c6c; /* 激活项左边框红色 */
  font-weight: 500;
}
.alert-type .icon {
  width: 16px; /* 调整图标大小 */
  height: 16px;
  margin-right: 8px; /* 图标与文字间距 */
}
/* 请替换为您的实际图标路径 */
.icon.urgent { background-image: url('your-path-to-urgent-icon.png'); }
.icon.important { background-image: url('your-path-to-important-icon.png'); }
.icon.minor { background-image: url('your-path-to-minor-icon.png'); }
.icon.info { background-image: url('your-path-to-info-icon.png'); }

.alert-type.active .icon.urgent { background-image: url('your-path-to-urgent-active-icon.png'); } /* 可选：激活状态的图标 */


.count {
  margin-left: auto; /* 将数字推到最右边 */
  color: #909399;
  font-size: 13px;
}
.alert-type.active .count {
  color: #f56c6c; /* 激活项的数字颜色 */
}

.alerts-table {
  flex: 1;
}
.alerts-more {
  text-align: right;
  margin-top: 10px; /* 与表格的间距 */
}
.alerts-more a {
  color: #409EFF;
  font-size: 13px;
  text-decoration: none;
}
.alerts-more a:hover {
  text-decoration: underline;
}

/* Element UI Table 细微调整 */
.alerts-table .el-table th {
  background-color: #f5f7fa; /* 表头背景色 */
  color: #909399; /* 表头文字颜色 */
  font-weight: 500;
}
.alerts-table .el-table td, .alerts-table .el-table th {
  padding: 8px 0; /* 单元格上下内边距 */
}
/* 新的帮助卡片样式 */
.online-help-card,
.other-help-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  gap: 20px; /* 标题区域和内容区域的间距 */
  align-items: flex-start; /* 确保子元素顶部对齐 */
}

.online-help-links {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 20px; /* 行间距 和 列间距 */
  padding-top: 5px; /* 使链接内容顶部与标题区域内容顶部对齐 */
}

.online-help-links li {
  margin-bottom: 8px; /* 调整链接项之间的垂直间距，使其更紧凑 */
}

.other-help-items {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px 20px;
}
.online-help-links a {
  font-size: 13px;
  color: #606266;
  text-decoration: none; /* 确保默认状态无下划线 */
  position: relative;
  padding-left: 12px;
  cursor: default; /* 使其看起来不可点击 */
}

.online-help-links a::before {
  content: none; /* 移除小圆点 */
  position: absolute;
  left: 0;
  top: 0;
  color: #909399;
}

.online-help-links a:hover {
  color: #409EFF; /* 保留悬浮时的颜色变化，如果不需要也可以移除 */
  text-decoration: none; /* 确保悬浮时也无下划线 */
}

/* Element UI Table 细微调整 */
.alerts-table .el-table th {
  background-color: #f5f7fa; /* 表头背景色 */
  color: #909399; /* 表头文字颜色 */
  font-weight: 500;
}
.alerts-table .el-table td, .alerts-table .el-table th {
  padding: 8px 0; /* 单元格上下内边距 */
}
</style>